<template>
	<view class="farmlist">
		<view class="item" v-for="(d, index) in list" :key="index">
			<view class="topcontent">

				<u--image :mode="'aspectFill'" :src="d.img" width="120rpx" height="120rpx"></u--image>
				<view class="rightcontent">
					<view class="fs-24 title">
						<view>
							<text>种植作物：</text>
							<text class="text2">{{ d.name }}</text>
							<text v-if="d.type == 5" class="text3 fs-24">果实成熟期</text>
							<text v-if="d.type == 3" class="text3 fs-24">结果期</text>
							<text v-if="d.type == 2" class="text3 fs-24">开花期</text>
							<text v-if="d.type == 1" class="text3 fs-24">待丰收</text>
						</view>
						<view class="startBtn" @click="_click(d)">
							<text :style="'color:'+rightTextColor">{{ rightText }}</text>
							<u-icon name="arrow-right" :color="rightTextColor" size="14"></u-icon>
						</view>
					</view>
					<view class="fs-24 mar-top10">种植周期：已种植{{d.day}}天</view>
					<view class="fs-24 mar-top10">占地{{ d.zd }}亩</view>
				</view>
			</view>
			<view class="fs-24 mar-top10">{{d.where}}</view>
			<slot name="one" :data="d"></slot>
		</view>
	</view>
</template>
<!-- <slot name="one" :data="d" :color="rightTextColor" :rightText="rightText"></slot> -->
<!-- <template #one="{data,color,rightText}"> -->

<script>
	export default {
		name: 'uni-farmlist2',
		props: {
			rightText: {
				type: String,
				default: ''
			},
			rightTextColor: {
				type: String,
				default: ''
			},
			list: {
				type: Array,
				default: () => [{
					name: '番茄'
				}, {
					name: '番茄'
				}]
			}
		},
		data() {
			return {};
		},
		methods: {
			_click(d) {
				this.$emit('itemClick', d);
			}
		}
	};
</script>

<style lang="scss">
	.farmlist {
		margin: 20rpx 30rpx 0;

		.item {
			background: #fff;
			margin-top: 20rpx;
			padding: 14rpx 18rpx 16rpx;
			border-radius: 8rpx;

			.topcontent {
				display: flex;

				.rightcontent {
					flex: 1;
					margin-left: 16rpx;
					align-items: center;

					.title {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.text2 {
							font-weight: bold;
							margin-left: 10rpx;
						}

						.text3 {
							border: 1px solid #10b9ff;
							background: #eaf9ff;
							color: #13b3ee;
							border-radius: 8rpx;
							padding: 0 10rpx;
							margin-left: 16rpx;
						}

						.startBtn {
							display: flex;
							// color: #1e7bfb;
							align-items: center;
						}
					}
				}
			}
		}
	}
</style>
